<template>
	<div class="clues flex-row">
		<div class="clues-left">
			<div class="search-box">
				<el-input type="text" size="small" placeholder="搜索账号" v-model="sechsdkey" @input="inputC"></el-input>
			</div>
			<div class="account-list">
				<div class="item flex-row" v-for="(item,index) in testAccount" :key="index"
					:class="{'active':item.check}" @click="selectAccount(item)">
					<el-avatar :size="40" :src="item.avatar"></el-avatar>
					<div class="name flex-column jc-space-between">
						<div class="top text-over">{{item.username}}</div>
						<div class="bottom">
							<span v-if="index%5===0">抖音</span>
							<span v-else class="red">头条</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="clues-right">
			<el-tabs type="border-card" @tab-click="handleClick" v-model="tabsValue" v-if="rightList.length > 0" closable
				@tab-remove="handleTabsEdit">
				<el-tab-pane v-for="(item,index) in rightList" :label="item.username" :name="item.username">
					<div class="tab-pane-btns flex-row">
						<el-button size="mini" v-if="get_rules('添加线索')" type="primary" @click="editHandle()">添加线索</el-button>
						<el-button size="mini" v-if="get_rules('批量导入线索')" type="primary">
							<el-upload
							  class="upload-demo"
							   action="https://pm.ab0769.com/api/common/upload"
							  :on-success="on_success"
							  :limit="1"
							  :file-list="fileList">
							  <el-button size="small" type="primary">批量导入线索</el-button>
							</el-upload>
							</el-button>
						<el-button  v-if="get_rules('下载导入模板')" size="mini" type="primary"><a style="color: #fff;" href="https://pm.ab0769.com/商机线索-模板.xlsx" target="_blank">下载导入模板</a></el-button>
						<el-button  v-if="get_rules('删除线索')" size="mini" type="danger" @click="deleHandle(0)">删除线索</el-button>
					</div>

					<el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%"
						@selection-change="handleSelectionChange" :header-cell-class-name="headerCellClass"
						:cell-class-name="cellStyle">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column label="序号" width="50">
							<template slot-scope="scope"> {{ scope.$index + 1 }}</template>
						</el-table-column>
						<el-table-column label="关键词/标题" width="120">
							<template slot-scope="scope">{{ scope.row.title }}</template>
						</el-table-column>
						<el-table-column prop="tiktok" label="抖音号/头条号" width="120">
						</el-table-column>
						<el-table-column prop="contact_information" label="联系方式" show-overflow-tooltip> </el-table-column>
						<el-table-column prop="add_time" label="时间" show-overflow-tooltip> </el-table-column>
						<el-table-column prop="content" label="线索" show-overflow-tooltip> </el-table-column>
						<el-table-column prop="is_electrical_connection" :formatter="stateFormat" label="是否电联" show-overflow-tooltip width="85"></el-table-column>
						<el-table-column prop="is_wechat" :formatter="stateFormat" label="是否加微" show-overflow-tooltip width="85"></el-table-column>
						<el-table-column prop="is_number_valid" :formatter="stateFormat" label="是否有效" show-overflow-tooltip width="85"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button v-if="get_rules('编辑线索')" type="primary" size="mini" @click="editHandle(scope.row.id)">编辑</el-button>
								<el-button v-if="get_rules('删除线索')" type="danger" size="mini" @click="deleHandle(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>

					<!-- 分页 -->
					<div class="custom-pagination">
						<el-pagination background layout="prev, pager, next,sizes" :total="total"
							@current-change="pageChange" @size-change="handleSizeChange" :page-size="pagesize"
							:page-sizes="[10, 20, 50, 100]">
						</el-pagination>
					</div>
				</el-tab-pane>
			</el-tabs>
			
			<!-- 弹窗 不能放到 el-tabs 里面，因为 el-tabs 是循环出来的-->
			<edit-clues v-if="showModal" ref="myModal" @refreshDataList="loadData"></edit-clues>
		</div>
	</div>
</template>

<script>
	import {Message} from 'element-ui';
	import EditClues from './components/EditClues.vue';
	import {fuzzyQuery} from '../../util/index.js'
	export default {
		components: {
			EditClues
		},
		data() {
			return {
				sechsdkey:'',
				fileList:[],
				page: 1, // 当前页码
				pagesize: 10, // 当前条数
				total: 0, // 总条数
				showModal: false, // 显示弹窗
				squareUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
				testAccount: [], // 左边列表数据
				rightList: [], // 右边选项卡数据
				tabsValue: '',
				tableData: [],
				testAccounts:[],
				multipleSelection: [],
				current_user_id:0,

			}
		},
		mounted() {
			
			this.$http.post("common/users").then((response) => {
				 this.testAccount=response.data.records.map(res=>{
					  res.check=false;
					  return res;
				 })
				this.testAccounts=this.testAccount;
				this.selectAccount(this.testAccount[0])
			});
		},
		methods: {
		on_success(response){
			this.$http.post("Clue/imports",{'file':response.data.url,user_id:this.current_user_id}).then((response) => {
					Message({
						type: 'success',
						message: response.msg
					});
			});
			
			this.fileList=[];
		},
			stateFormat(row, column) {
				
			    if (row[column.property] == 1) {
			      return '是'
			    } else if(row[column.property] == 2) {
			      return '否'
			    }else {
			      return '未知'
			    }
				} ,
			loadData(){
				this.showModal = false;
				this.$http.post("Clue/lists",{customer_uid:this.current_user_id}).then((response) => {
						this.tableData=response.data.records;
						this.total=response.data.total;
				});
			},
			selectAccount(item) { // 左边账号列表点击事件
				if (item.check) { // 点击左边的列表，只允许选中，取消的话点击右边的关闭按钮
					return false;
				}
				item.check = true;
				this.rightList.push(item);
				this.current_user_id=item.id;
				this.tabsValue = item.username;
				this.page=1;
				this.loadData();
				
			},
			handleTabsEdit() { // 右边tabs选项卡删除事件
				//console.log(1234, this.tabsValue)
				this.rightList.forEach((n, i) => {
					
					if (n.username === this.tabsValue) {
						// 删除以后要给tabs默认选中一个
						let nextTab = this.rightList[i + 1] || this.rightList[i - 1];
						if (nextTab) {
							this.tabsValue = nextTab.username;
						}
						this.testAccount.forEach(nn => { // 左边列表选中状态给他取消
							if (nn.username === n.username) {
								nn.check = false;
							}
						})
						this.rightList.splice(i, 1);
					}
				})
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleClick(e){
					this.current_user_id=this.rightList[e.index]['id'];
					this.page=1;
					this.loadData();
			},
			editHandle(id) {
				//console.log(id)
				this.showModal = true;
				//console.log(this.$refs)
				this.$nextTick(() => {
					this.$refs['myModal'].init(id,this.current_user_id);
				})
			},
			deleHandle(id=0) {
				if (this.multipleSelection.length > 0 || id > 0) {
					this.$confirm('确认删除当前数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						var ids=[];
						if(id>0){
							ids.push(id)
						}else{
							this.multipleSelection.map(res=>{
								ids.push(res.id)
							})
						}
						
						
                        this.axios.post('Clue/del', {id:ids}).then(response => {
                            if (response.code === 1) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功'
                                })
                                this.page = 1;
                               this.loadData();
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: response.msg
                                })
                            }
                        })
					}).catch(() => {
						console.log('取消退出');
					});
				} else {
					this.$message.error('请选择要删除的数据')
				}
			},
			inputC(e){
				if(e.length<=0){
					
					this.testAccount=this.testAccounts;
				}else{
					var list=fuzzyQuery(this.testAccounts,'username',e);
					this.testAccount=list;
				}
				
			},
			pageChange(page) {
				console.log(page)
				this.page = page;
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pagesize = val;
			},
			headerCellClass() { // 设置表头样式
				return 'table-header text-center'
			},
			cellStyle() { // 设置表格样式
				return 'text-center'
			},
		}
	}
</script>

<style scoped lang="scss">
	.clues {
		width: 100%;
		height: auto;

		.clues-left {
			width: 220px;
			height: calc(100vh - 66px);
			overflow-x: hidden;
			overflow-y: auto;
			background-color: #FFF;
			margin-right: 10px;

			.search-box {
				padding: 10px;
			}

			.account-list {
				padding-bottom: 15px;

				.item {
					padding: 5px 0;
					margin-bottom: 5px;
					cursor: pointer;

					.name {
						width: calc(100% - 60px);
						margin-left: 10px;

						.top {
							font-size: 15px;
							color: #626066;
						}

						.bottom {
							color: darkblue;
							font-size: 12px;
							font-weight: bolder;
						}
					}
				}

				.active {
					background-color: #F1F3FC;
				}
			}
		}

		.clues-right {
			width: calc(100% - 230px);
			background-color: #FFF;

			.tab-pane-btns {
				margin-bottom: 16px;
			}
		}
	}
</style>
